<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            border: 1px solid #666666;
            display: inline-block;
            min-width: 100px;
            min-height: 100px;
            padding: 10px;
            background-color: white;
        }
        .box:active{
            background-color: rgba(255, 166, 0, 0.2);
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" @keydown="printFun($event)">
        <!-- 修饰符的作用用于限制事件得触发条件,例如 .f 修饰符是将事件限制的f按钮上 -->
        <input type="text" @keydown.f="printFun($event)">
        <hr>
        <h5>v-on指令的事件修饰符</h5>
        <p>事件修饰符是用于控制v-on事件的功能特性的</p>
        <p>.once = 一次性事件 = 绑定的事件一旦完成一次调用，该事件将从元素上删除</p>
        <input type="button" value="一次性事件绑定" @click.once="printInfo()">
        <p>.prevent ： 为事件添加阻止默认事件功能（调用js event.preventDefault()）</p>
        <a href="https://www.baidu.com" @click.prevent>百度</a>
        <br> <br>
        <p>.stop ： 为事件添加阻止事件冒泡(方法执行)特性（调用js event.stopPropagation()）</p>
        <p>.capture ：改变事件执行顺序，将冒泡事件转换为事件捕获</p>
        <p>.self ： 事件只有被绑定的元素才具有权限触发 - 仍然保留事件冒泡(事件穿透)</p>
        <div class="box" @click="printName('A')">
            A
            <div class="box" @click="printName('B')">
                B
                <div class="box" @click.stop="printName('C')">
                    C
                    <div class="box" @click="printName('D')">
                        D
                        <div class="box" @click="printName('E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="box" @click.capture="printName('A')">
            A
            <div class="box" @click.capture="printName('B')">
                B
                <div class="box" @click.capture="printName('C')">
                    C
                    <div class="box" @click.capture="printName('D')">
                        D
                        <div class="box" @click.capture="printName('E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 捕获方法的回调优先于冒泡方法执行 -->
        <div class="box" @click.capture="printName('A')">
            A
            <div class="box" @click="printName('B')">
                B
                <div class="box" @click.capture="printName('C')">
                    C
                    <div class="box" @click="printName('D')">
                        D
                        <div class="box" @click.capture="printName('E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="box" @click.capture="printName('A')">
            A
            <div class="box" @click="printName('B')">
                B
                <!-- v-on 修饰符可以连续定义 -->
                <!-- <div class="box" @click.capture.stop="printName('C')"> -->
                <div class="box" @click.capture="printName('C')">
                    C
                    <div class="box" @click.stop="printName('D')">
                        D
                        <div class="box" @click.capture="printName('E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="box" @click="printName('A')">
            A
            <div class="box" @click="printName('B')">
                B
                <div class="box" @click.self="printName('C')">
                    C
                    <div class="box" @click="printName('D')">
                        D
                        <div class="box" @click="printName('E')">
                            E
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="box" @click="printEvent($event)">
            A
            <div class="box">
                B
            </div>
        </div>
    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {

                }
            },
            methods:{
                printFun(e){
                    console.log(e)
                },
                printInfo(){
                    console.log("printInfo")
                },
                printName(name){
                    console.log(name)
                },
                printEvent(e){
                    console.log("元素A的事件")
                    // console.log(e)
                    console.log("target",e.target)  // 触发事件的元素
                    console.log("currentTarget",e.currentTarget) // 绑定事件的元素
                    console.log( e.target==e.currentTarget )

                }
            }
        }).mount("#app")
    </script>
</body>
</html>